<template>
  <div id="app">
    <el-container>
      <el-header
        style="height: 70px;display: flex;justify-content: center;align-items: center; background-color: #f5f5f5">
        <div class="heads">
          <el-col :span="7" style="padding-top: 12px; text-align: left;height: 100%; font-family: 'JetBrains Mono'">
            <span class="head">在线阅览室</span>
            <el-button type="text" style="color: orangered" @click="toSystem">向客服反馈</el-button>
          </el-col>
          <el-col :span="8"
                  style="height: 100%;display: flex;justify-content: flex-start;
                  align-items: center;position: relative">
            <el-input placeholder="请输入书名" v-model="input1" @keydown.enter.native="search">
              <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
            </el-input>
          </el-col>
          <el-col :span="5">
            <div>
              <div class="index" @click="toIndex">回到主页</div>
            </div>
          </el-col>
          <el-col :span="3"
                  style="height: 100%;display: flex;justify-content: flex-start;align-items: center;position: relative">
            <div v-if="login">
                <div class="dropdown">
                  <el-avatar :src="currentUser.avatar" :size="45"/>
                  <div class="dropdown-content">
                    <span @click="toSelf">主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</span>
                    <span @click="collect">收&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;藏</span>
                    <span @click="friend">好&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;友</span>
                    <span @click="message">通&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知</span>
                    <span @click="doLogout">注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                  </div>
                </div>
            </div>
            <div v-show="login" style=" text-align: left; padding-left: 9px; font-size: 16px; height: 70px"
                 @mouseenter="iconHover()" @mouseleave="iconOver()">
              <div style="padding-top: 25px">{{ currentUser.userName }}</div>
            </div>
            <div v-if="!login">
              <router-link to="/login">登录账号</router-link>
              <span class="yy">|</span>
              <router-link to="/login">免费注册</router-link>
            </div>
          </el-col>
        </div>
      </el-header>
      <el-main
        style=" height: 100%;display: flex; overflow-y: auto; background-repeat: repeat-y; background-size: 100%;">
        <div style="width: 200px;height: 100%;">

        </div>
        <div style=" flex: 1;height: 650px;">
          <router-view/>
        </div>
        <div style="width: 200px;height: 100%;">

        </div>

      </el-main>
      <el-footer id="footer">
        <div style="margin-top: 20px; font-weight: bold;">Copyright@2022.12.10 YangXiong.AllRights Reserved.</div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      currentUser: {
        userName: '',
        avatar: ''
      },
      login: false,
      show: false,
      input1: '',
    }

  },
  created() {
    const item = localStorage.getItem("loginMes");
    if (item != null) {
      this.login = true;
      this.currentUser = JSON.parse(item);
    }

  },
  methods: {
    collect() {
      this.$router.push({path: "/user/collect", query: {userName: this.currentUser.userName}});
    },
    search() {
      this.$router.push({path: "/book/query", query: this.input1});
    },
    toSystem() {
      this.$router.push("/advise");
    },
    toSelf() {
      this.$router.push({path: "/self", query: this.currentUser});
    },
    toIndex() {
      this.$router.push({path: "/"});
    },
    message() {
      this.$router.push({path: "/user/message", query: this.currentUser});
    },
    friend() {
      this.$router.push({path: "/user/friend", query: this.currentUser});
    },
    doLogout() {
      this.$axios.get("/api/logout", {
        headers: {
          token: JSON.parse(localStorage.getItem("loginMes")).token
        }
      }).then(res => {
        localStorage.removeItem("loginMes");
        this.login = false;
        this.$router.push("/");
        if (res.data.code === '200') {
          this.$message.success(res.data.message);
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    iconHover() {
      this.show = true;
    },
    iconOver() {
      this.show = false;
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;

}

html,
body {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.index {
  color: palevioletred;
  font-size: 16px;
  margin-top: 22px;
  margin-left: 30px;
}

#footer {
  bottom: 0;
  font-size: 14px;
  text-align: center;
  background-color: #f5f5f5;
}

.heads {
  width: calc(100% - 200px - 200px);
  height: 100%;
}

.head {
  text-align: left;
  font-size: 30px;
  color: #333;
  font-weight: 600;
}

.user-cord {
  width: 120px;
  height: 193px;
  position: absolute;
  right: 70px;
  bottom: -190px;
  background-color: peachpuff;
  font-size: 14px;
  border-radius: 3px;
  z-index: 10;
}

.btn {
  margin-left: 25%;
}

a:-webkit-any-link {
  color: cornflowerblue;
  cursor: pointer;
  text-decoration: none;
}

.yy {
  color: cornflowerblue;
}

.dropdown-content{
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow:  0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content span{
  color: #000000;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content span:hover{background-color: #f1f1f1}
.dropdown:hover .dropdown-content{
  text-align: center;
  color: #444;
  display: block;
  z-index: 9999;
}
.dropdown:hover .dropbtn{
  background-color: #3e8e41;
}
.dropdown{
  position: relative;;
  display: inline-block;
  float:left;
}
</style>
